<template>
	<view class="template-set">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left-arrow'></text>
			</view>
		</tn-nav-bar>

		<view class="tn-margin-top" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

			<tn-form :model="form" ref="form" :labelWidth="220" labelAlign="left"
				class="tn-strip-bottom-min tn-padding">
				<tn-form-item label="姓名" prop="name" :required="true">
					<tn-input v-model="form.name" />
				</tn-form-item>
				<tn-form-item label="身份证号" prop="intro" :required="true">
					<tn-input v-model="form.intro" />
				</tn-form-item>
				<tn-form-item label="改造所属区" prop="sex" :required="true">
					<tn-input v-model="form.sex" type="select" />
				</tn-form-item>
				<tn-form-item label="改造所属街道" prop="sex" :required="true">
					<tn-input v-model="form.sex" type="select" />
				</tn-form-item>
				<tn-form-item label="改造所属居委" prop="sex" :required="true">
					<tn-input v-model="form.sex" type="select" />
				</tn-form-item>
				<tn-form-item label="想要改造区域" prop="sex" :required="true">
					<tn-input v-model="form.sex" type="select" />
				</tn-form-item>
				<tn-form-item label="详细地址" prop="sex" :required="true">
					<tn-input v-model="form.name" />
				</tn-form-item>
				<tn-form-item label="手机号" prop="sex" :required="true">
					<tn-input v-model="form.name" />
				</tn-form-item>
				<!-- <tn-form-item label="爱好" prop="hobby" :required="true">
					<tn-checkbox-group v-model="form.hobby">
						<tn-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index"
							:name="item.name">
							{{ item.name }}
						</tn-checkbox>
					</tn-checkbox-group>
				</tn-form-item>
				<tn-form-item label="学历" prop="radio" :required="true">
					<tn-radio-group v-model="form.radio">
						<tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{ item.name }}
						</tn-radio>
					</tn-radio-group>
				</tn-form-item> -->
			</tn-form>
			<view class="" style="text-align: center;">
				<tn-button @click="submit" backgroundColor="#01BEFF" fontColor="#fff" style="width: 90%;">提交</tn-button>
			</view>
		</view>


	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateSet',
		mixins: [template_page_mixin],
		data() {
			return {
				show1: false,
				show2: false,
				show3: false,
				index: 0,
				form: {
					name: '',
					intro: '',
					sex: '',
					hobby: [],
					radio: '',
					security: false
				},
				checkboxList: [{
						name: '编程',
						checked: false,
						disabled: false
					},
					{
						name: '羽毛球',
						checked: false,
						disabled: false
					},
					{
						name: '篮球',
						checked: false,
						disabled: false
					}
				],
				radioList: [{
						name: '小学',
						disabled: false
					},
					{
						name: '大学',
						disabled: false
					}
				],
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式 
						trigger: ['change', 'blur'],
					}],
					intro: [{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change'
					}]
				}
			}

		},
		onReady() {
			this.$refs.form.setRules(this.rules);
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 跳转
			tn(e) {
				uni.navigateTo({
					url: e,
				});
			},

			// 弹出模态框
			showModal1(event) {
				this.openModal1()
			},
			// 打开模态框
			openModal1() {
				this.show1 = true
			},

			// 弹出模态框
			showModal2(event) {
				this.openModal2()
			},
			// 打开模态框
			openModal2() {
				this.show2 = true
			},

			// 弹出模态框
			showModal3(event) {
				this.openModal3()
			},
			// 打开模态框
			openModal3() {
				this.show3 = true
			},

			bindPickerChange: function(e) {
				this.index = e.detail.value
			},

			bindPickerChange1: function(e) {
				this.index1 = e.detail.value
			},

			bindDateChange: function(e) {
				this.date = e.detail.value
			},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}

		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 60%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

	}


	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	/* 间隔线 end*/


	/* 用户头像 start */
	.logo-image {
		width: 80rpx;
		height: 80rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 2rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}


	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 100rpx;
		height: calc(120rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: calc(30rpx + env(safe-area-inset-bottom));
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);

	}

	/* 底部悬浮按钮 end*/
</style>